import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { useCollectionExhibitionList, CollectionExhibition } from '@/pages/MyCollection/MyCollectionContext';
import ProductCard from '@/pages/components/ProductCard/ProductCard';
import Taro from '@tarojs/taro';
import { apiPostSetCollection } from '@/pages/_server/_api/ApiCollection/apiPostSetCollection';
export interface IProps extends ICompProps {
    CollectionExhibitionState: CollectionExhibition;
    CollectionExhibitionDispatch;
}
MyCollectionList.defaultProps = {} as Partial<IProps>;
function MyCollectionList(props: IProps) {
    const { className, style, CollectionExhibitionState, CollectionExhibitionDispatch } = props;
    const localClassName = useClassName('MyCollectionList', className);
    const handleChangeCollection = (id, isLike) => {
        const showContent = isLike === '1' ? '已取消收藏' : '已收藏';
        const setLike = isLike === '1' ? '0' : '1';
        apiPostSetCollection({ goodsId: id, value: setLike }).then((res) => {
            /**设置本地暂时显示 */
            CollectionExhibitionDispatch({
                type: 'setLikes',
                payload: { id, setLike },
            });
            Taro.showToast({
                title: showContent,
                icon: 'none',
            });
        });
    };
    return (
        <RootView className={localClassName} style={style}>
            {CollectionExhibitionState.collectionList.map((collection) => (
                <ProductCard
                    className="ProductCard"
                    key={collection.id}
                    title={collection.name}
                    subTitle={collection.artworkIntro}
                    imgUrl={collection.artworkIconUrl}
                    price={collection.price}
                    classCard="collection"
                    isCollection={collection.likes === '1' ? true : false}
                    handleChangeCollection={() => {
                        handleChangeCollection(collection.id, collection.likes);
                    }}></ProductCard>
            ))}
        </RootView>
    );
}
export default React.memo(MyCollectionList as FC<IProps>);
const RootView = styled(View)`
    &.MyCollectionList {
        margin-top: 48px;
        .ProductCard + .ProductCard {
            margin-top: 64px;
        }
    }
`;
